<script src="js/jquery_datepicker/jquery-1.8.0.js"></script>
<script src="js/jquery_datepicker/ui/jquery.ui.core.js"></script>
<script src="js/jquery_datepicker/ui/jquery.ui.widget.js"></script>
<script src="js/jquery_datepicker/ui/jquery.ui.datepicker.js"></script>
<script src="js/search_widget.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="js/helper_functions.js"></script>

<div id="search-widget">

<form action="hotelResults.php" method="post">
    <div id="destination">
	<div id="input_destination_label">
            <label>
		Where would you like to go?
            </label>
	</div>
        <div id="input_destination">
            <input id="search_textbox" type="textbox" name="destination" />
	</div>
    </div>
    <table id="check_in_check_out">
        <tr>
            <td id="check-in"><span>Check-in</span><input type="textbox" id="checkin" name="check-in"/></td>
            <td id="check-out"><span>Check-out</span><input type="textbox" id="checkout" name="check-out" /></td>


        </tr>
    </table>
    <div id="rooms">
        {for $k=1 to 8}
        <div id="room{$k}" {if $k==1} style="display:inline;" {else} style="display:none;" {/if} >
            <div class="adults">
                {if $k==1}<span class="label">Adults<span>(18+)</span></span>{/if}
                <select id="rooms{$k-1}adultsCount" name="room{$k}[adultsCount]">
                    {for $i=1 to 4}
                        <option {if $i==2} selected="selected" {/if} value="{$i}">{$i}</option>
                    {/for}
                </select>
            </div>
            <div class="children">
                {if $k==1}<span class="label">Children<span>(0-17)</span></span>{/if}
                <select id="rooms{$k-1}childrenCount" name="room{$k}[childrenCount]" onchange="add_child({$k-1})">
                    {for $i=0 to 3}
                        <option {if $i==0} selected="selected" {/if} value="{$i}">{$i}</option>
                    {/for}
                </select>
            </div>

                <div class="age">
                    {if $k==1}<legend id="age_label">Age<br></legend>{/if}
                    <select id="rooms{$k-1}children1"  style="display:none" name="room{$k}[children1]">
                        <option value="">&mdash;</option>
                        <option value="0">&lt;1</option>
                    {for $i=1 to 17}
                        <option {if $i==7} selected="selected" {/if} value="{$i}">{$i}</option>
                    {/for}
                    </select>

                    <select id="rooms{$k-1}children2" style="display: none;" name="room{$k}[children2]">
                        <option value="">&mdash;</option>
                        <option value="0">&lt;1</option>
                    {for $i=1 to 17}
                        <option {if $i==7} selected="selected" {/if} value="{$i}">{$i}</option>
                    {/for}
                    </select>
                    <select id="rooms{$k-1}children3"  style="display: none;" name="room{$k}[children3]">
                        <option value="">&mdash;</option>
                        <option value="0">&lt;1</option>
                    {for $i=1 to 17}
                        <option {if $i==7} selected="selected" {/if} value="{$i}">{$i}</option>
                    {/for}
                    </select>
                </div>
            </div>
                    {/for}

    </div>
    <div id="add_new_room_search_div">
        <table id="buttons_search_add">
            <tr>
                <td align="left">
                    <label>Number of rooms:</label>
                    <select id="room_number"  style="display: inline;" name="room_noumber" onchange="add_room()">
                    {for $i=1 to 8}
                        <option {if $i==1} selected="selected" {/if} value="{$i}">{$i}</option>
                    {/for}
                </select>

					</td>
                <td align="right">
                    <input id="search_button" type="submit" value="Search" />
                </td>
        </table>
    </div>
</form>
<script type="text/javascript">
	//reset();//reset the values of the controls
</script>
</div>